<template>
  <div class="menu">
    <div class="menu_side">
      <div class="menu_side_margin">
        <div class="menu_side_item" name="admin_home" @click="route_to('admin_home')">
          <div class="menu_side_item_border">
            <svg class="menu_side_item_icon">
              <use
                xlink:href="../../../assets/img/icons/AsideSvg.svg#icon-home"
              ></use>
            </svg>
            <div class="menu_side_item_text"> 首页</div>
          </div>
        </div>
      </div>
    </div>
    <div class="menu_side">
      <div class="menu_side_margin">
        <div class="menu_side_item" name="admin_resource" @click="route_to('admin_resource')">
          <div class="menu_side_item_border">
            <svg class="menu_side_item_icon">
              <use
                xlink:href="../../../assets/img/icons/AsideSvg.svg#icon-stack"
              ></use>
            </svg>
            <div class="menu_side_item_text"> 资源管理</div>
          </div>
        </div>
      </div>
    </div>
    <div class="menu_side">
      <div class="menu_side_font" @click="openItem('1')">
        <div name="1" style="color: #fff;">
          <svg class="menu_side_item_icon">
            <use
              xlink:href="../../../assets/img/icons/AsideSvg.svg#icon-envelop"
            ></use>
          </svg>
          <span> 教学信息管理 </span>
          <a-icon type="up"/>
        </div>
      </div>
      <div v-if="item1Visible" style="background-color: #000c17;">
        <div class="menu_side_center">
          <div class="menu_side_item" name="admin_timetable" @click="route_to('admin_timetable')">
            <div class="menu_side_item_center">
              <svg class="menu_side_item_icon">
                <use
                  xlink:href="../../../assets/img/icons/AsideSvg.svg#icon-alarm"
                ></use>
              </svg>
              <div class="menu_side_item_text"> 上课时间</div>
            </div>
          </div>
        </div>
        <div class="menu_side_center">
          <div class="menu_side_item" name="admin_space" @click="route_to('admin_space')">
            <div class="menu_side_item_center">
              <svg class="menu_side_item_icon">
                <use
                  xlink:href="../../../assets/img/icons/AsideSvg.svg#icon-office"
                ></use>
              </svg>
              <div class="menu_side_item_text"> 教学空间</div>
            </div>
          </div>
        </div>
        <div class="menu_side_center">
          <div class="menu_side_item" name="admin_teacher" @click="route_to('admin_teacher')">
            <div class="menu_side_item_center">
              <svg class="menu_side_item_icon">
                <use
                  xlink:href="../../../assets/img/icons/AsideSvg.svg#icon-users"
                ></use>
              </svg>
              <div class="menu_side_item_text"> 人员管理</div>
            </div>
          </div>
        </div>
        <div class="menu_side_center">
          <div class="menu_side_item" name="admin_institution" @click="route_to('admin_institution')">
            <div class="menu_side_item_center">
              <svg class="menu_side_item_icon">
                <use
                  xlink:href="../../../assets/img/icons/AsideSvg.svg#icon-books"
                ></use>
              </svg>
              <div class="menu_side_item_text"> 院系班级</div>
            </div>
          </div>
        </div>
        <div class="menu_side_center">
          <div class="menu_side_item" name="admin_course" @click="route_to('admin_course')">
            <div class="menu_side_item_center">
              <svg class="menu_side_item_icon">
                <use
                  xlink:href="../../../assets/img/icons/AsideSvg.svg#icon-codepen"
                ></use>
              </svg>
              <div class="menu_side_item_text"> 教学规划</div>
            </div>
          </div>
        </div>
        <div class="menu_side_center">
          <div class="menu_side_item" name="admin_connection" @click="route_to('admin_connection')">
            <div class="menu_side_item_center">
              <svg class="menu_side_item_icon">
                <use
                  xlink:href="../../../assets/img/icons/AsideSvg.svg#icon-book"
                ></use>
              </svg>
              <div class="menu_side_item_text"> 课程管理</div>
            </div>
          </div>
        </div>
        <div class="menu_side_center">
          <div class="menu_side_item" name="admin_schedule" @click="route_to('admin_schedule')">
            <div class="menu_side_item_center">
              <svg class="menu_side_item_icon">
                <use
                  xlink:href="../../../assets/img/icons/AsideSvg.svg#icon-calendar"
                ></use>
              </svg>
              <div class="menu_side_item_text"> 课表显示</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="menu_side">
      <div class="menu_side_font" @click="openItem('2')">
        <div name="2">
          <svg class="menu_side_item_icon">
            <use
              xlink:href="../../../assets/img/icons/AsideSvg.svg#icon-power-cord"
            ></use>
          </svg>
          <span> 小栈设备管理 </span>
          <a-icon type="up"/>
        </div>
      </div>
      <div v-if="item2Visible" style="background-color: #000c17;">
        <div class="menu_side_center">
          <div class="menu_side_item" name="admin_installation" @click="route_to('admin_installation')">
            <div class="menu_side_item_center">
              <svg class="menu_side_item_icon">
                <use
                  xlink:href="../../../assets/img/icons/AsideSvg.svg#icon-rocket"
                ></use>
              </svg>
              <div class="menu_side_item_text"> 设备升级</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      item1Visible: true,
      item2Visible: false,
    };
  },
  methods: {
    route_to(key) {
      let item1 = document.getElementsByClassName("menu_side_item");
      for(let i = 0; i < item1.length; i++) {
        if(item1[i].attributes[0].value == key ) {
          item1[i].className = "menu_side_itemfocus";
        } else {
          item1[i].className = "menu_side_item";
        }
      }
      let item2 = document.getElementsByClassName("menu_side_itemfocus");
      for(let i = 0; i < item2.length; i++) {
        if(item2[i].attributes[0].value == key ) {
          item2[i].className = "menu_side_itemfocus";
        } else {
          item2[i].className = "menu_side_item";
        }
      }
      if (this.$route.name !== key) {
        this.$router.push({ name: key });
      }
    },
    openItem(value) {
      if(value =="1") {
        this.item1Visible = !this.item1Visible;
        if(this.item1Visible) {
          document.getElementsByName("1")[0].style.color = "#fff";
        } else {
          document.getElementsByName("1")[0].style.color = "";
        }
      } else if(value == "2") {
        this.item2Visible = !this.item2Visible;
        if(this.item2Visible) {
          document.getElementsByName("2")[0].style.color = "#fff";
        } else {
          document.getElementsByName("2")[0].style.color = "";
        }
      }
    },
  },
};
</script>
<style lang="scss">

</style>